<script setup>
import { ref } from 'vue'
import api from '@/api'
import { parsePage, parseQuery } from '@/utils'
import { useRoute, useRouter } from 'vue-router'
import { Modal, Message } from '@arco-design/web-vue'
import uploadFile from '@/components/uploadFile.vue'

const $route = useRoute()
const $router = useRouter()

// const listFormData = ref({
//   keyword: $route.query.keyword || '',
//   material_category_id: null,
//   material_title: '',
//   statusVal: [],
//   page: parsePage($route.query.page, 1),
// })
const keyword = ref('')
const material_category_id = ref(null)
const material_title = ref('')
const statusVal = ref([])
const pageVal = ref(1)
const pageSize = ref(2)
const listData = ref([])
const listTotal = ref(0)
const listLoading = ref(false)
const categoryList = ref([])

const getCategoryList = async () => {
  try {
    const res = await api.get('ip/materialCategoryList')
    categoryList.value = res.data
  } catch (error) {
    console.error(error)
  }
}
getCategoryList()

const getVideoDetails = async (id) => {
  try {
    const res = await api.get('ip/videoDetails', {
      params: {
        id,
      },
    })
    formItem.value = res.data
    formData2.value.video_id = res.data.id
    formData2.value.clip_url = res.data.clip_url
  } catch (error) {
    console.error(error)
  }
}

const getListData = async (page = 1) => {
  // const query = listFormData.value
  // console.warn('query', query)
  listLoading.value = true
  try {
    // listFormData.value.page = page
    // const query = parseQuery(listFormData.value)
    // query.status = query.statusVal.toString()
    // $router.replace({ query })
    const res = await api.get('ip/videoList', {
      params: {
        keyword: keyword.value,
        material_category_id: material_category_id.value,
        material_title: material_title.value,
        status: statusVal.value.toString(),
        page,
        pageSize: pageSize.value,
      },
    })
    listData.value = res.data.items
    listTotal.value = res.data.pageInfo.total
    pageVal.value = page
  } catch (error) {
    console.error(error)
  }
  listLoading.value = false
}

const resetListData = () => {
  // listFormData.value.keyword = ''
  // listFormData.value.material_category_id = null
  // listFormData.value.material_title = ''
  // listFormData.value.statusVal = []
  keyword.value = ''
  material_category_id.value = null
  material_title.value = ''
  statusVal.value = []

  getListData()
}

getListData()

const formRef = ref()
const formRef2 = ref()
const formItem = ref({
  userdata: {},
  company: {},
  material: {
    category: {},
  },
})
const formLoading = ref(false)
const formLoading2 = ref(false)
const formVisible = ref(false)
const formVisible2 = ref(false)
const formData = ref({
  id: null,
  title: '',
  content: '',
  replies: {
    content: '',
  },
})
const formData2 = ref({
  video_id: null,
  clip_url: '',
})

const formRules = {
  name: [
    {
      required: true,
      message: '请填写分类名称',
    },
  ],
  image: [
    {
      required: true,
      message: '请上传分类图片',
    },
  ],
}

const create = () => {
  formRef.value?.resetFields()
  formVisible.value = true
}

const update = (item) => {
  formRef.value?.resetFields()
  getVideoDetails(item.id)
  formVisible.value = true
}

const openForm = async (item) => {
  getVideoDetails(item.id)
  formVisible2.value = true
}

const formSubmit = async () => {
  formLoading.value = false
}
const formSubmit2 = async () => {
  // if (await formRef.value.validate()) {
  //   return false
  // }
  if (!formData2.value.clip_url) {
    Message.error({
      content: '回传视频不可为空',
    })
    return false
  }

  formLoading2.value = true

  try {
    await api.post('ip/updateVideo', formData2.value)
    formVisible2.value = false
    getListData()
  } catch (error) {
    console.error(error)
  }

  formLoading2.value = false

  return false
}

const del = (item) => {
  console.warn('item', item.id)
  Modal.confirm({
    title: '删除分类',
    content: '您确定要删除吗？',
    bodyStyle: 'text-align:center',
    onBeforeOk: async () => {
      const res = await api.get('feedback/delFeedback?id=' + item.id)
      Message.success({
        content: res.message,
      })
      getListData()
    },
  })
}

const download = async (url) => {
  let a = document.createElement('a') //创建一个a标签元素
  a.style.display = 'none' //设置元素不可见
  a.href = url //设置下载地址，http地址
  document.body.appendChild(a) //追加dom元素
  a.click() //触发点击,下载
  document.body.removeChild(a) //删除dom元素
}

const changeFile = async (e) => {
  console.warn('e', e)
  formData2.value.clip_url = e
}
const videoStatusCount = ref({})
const getVideoStatusCount = async (e) => {
  try {
    const res = await api.get('ip/videoStatusCount')
    console.warn('getVideoStatusCount', res)
    videoStatusCount.value = res.data
  } catch (error) {
    console.error(error)
  }
}
getVideoStatusCount()
</script>

<template>
  <div class="page">
    <div class="header">
      <a-form layout="inline"
              @submit="getListData()">
        <a-space>
          <a-input v-model.trim="keyword"
                   placeholder="客户名称、账号、手机号"
                   allow-clear />

          <a-select v-model="material_category_id"
                    :style="{width:'220px'}"
                    placeholder="素材分类"
                    allow-clear>
            <a-option :value="item.id"
                      v-for="(item,index) in categoryList"
                      :key="index">{{ item.name }}</a-option>
          </a-select>

          <a-input v-model.trim="material_title"
                   placeholder="素材标题或正文"
                   allow-clear />

          <a-checkbox-group :max="1"
                            v-model="statusVal">
            <!-- <a-checkbox value="0">
              待提交剪辑
            </a-checkbox> -->
            <a-checkbox value="1">
              <a-badge :offset="[10, -6]"
                       :count="videoStatusCount.wait">
                待上传
              </a-badge>
            </a-checkbox>
            <a-checkbox value="2">
              <a-badge :offset="[10, -6]"
                       :count="videoStatusCount.complete">
                已完成
              </a-badge>
            </a-checkbox>
          </a-checkbox-group>

          <a-button type="primary"
                    html-type="submit">
            <template #icon>
              <icon-search />
            </template>
            查询
          </a-button>

          <a-button @click="resetListData">
            <template #icon>
              <icon-refresh />
            </template>重置
          </a-button>
        </a-space>
      </a-form>
    </div>

    <a-table :loading="listLoading"
             :data="listData"
             @page-change="getListData"
             :pagination="{
              showTotal: true,
              size: 'small',
              total: listTotal,
              pageSize: pageSize,
              current: pageVal,
            }">
      <template #columns>
        <a-table-column title="序号"
                        :width="60">
          <template #cell="{ rowIndex }"> {{ rowIndex + 1 }} </template>
        </a-table-column>
        <a-table-column title="客户名称"
                        data-index="user_name"></a-table-column>
        <a-table-column title="账号名称"
                        data-index="user_username"></a-table-column>
        <a-table-column title="账号手机号"
                        data-index="mobile"></a-table-column>
        <a-table-column title="素材分类"
                        data-index="material_category"></a-table-column>
        <a-table-column title="素材标题"
                        data-index="material_title"></a-table-column>
        <a-table-column title="提交时间"
                        data-index="submit_time"></a-table-column>
        <a-table-column title="状态">
          <template #cell="{ record }">
            <div v-if="record.status==0">
              待提交剪辑
            </div>
            <div v-if="record.status==1">
              待上传
            </div>
            <div v-if="record.status==2">
              已完成
            </div>
          </template>
        </a-table-column>
        <a-table-column title="回传时间"
                        data-index="clip_time"></a-table-column>
        <a-table-column align="right"
                        :width="88">
          <template #cell="{ record }">
            <a-space>
              <a-button type="primary"
                        size="mini"
                        @click="update(record)">查看</a-button>
              <a-button v-if="record.status==1"
                        @click="openForm(record)"
                        type="primary"
                        size="mini">回传视频</a-button>
              <a-button @click="openForm(record)"
                        v-if="record.status==2"
                        type="primary"
                        size="mini">重新上传</a-button>
            </a-space>
          </template>
        </a-table-column>
      </template>
    </a-table>

    <a-modal title="查看资源"
             width="800px"
             :ok-loading="formLoading"
             :on-before-ok="formSubmit"
             v-model:visible="formVisible">
      <a-form ref="formRef"
              :model="formData">
        <a-form-item field="name"
                     label="客户名称">
          <a-input readonly
                   v-model="formItem.company.name" />
        </a-form-item>
        <a-form-item field="name"
                     label="账号名称">
          <a-input readonly
                   v-model="formItem.userdata.name" />
        </a-form-item>
        <a-form-item field="name"
                     label="账号手机号">
          <a-input readonly
                   v-model="formItem.userdata.username" />
        </a-form-item>
        <a-form-item field="name"
                     label="素材">
          <a-input readonly
                   v-model="formItem.material.title" />
        </a-form-item>
        <a-form-item field="name"
                     label="素材分类">
          <a-input readonly
                   v-model="formItem.material.category.name" />
        </a-form-item>
        <a-form-item field="name"
                     label="素材内容">
          <a-textarea readonly
                      v-model="formItem.material.content" />
        </a-form-item>
        <a-form-item field="name"
                     label="剪辑要求">
          <a-input readonly
                   v-model="formItem.clip_need" />
        </a-form-item>
        <a-form-item field="name"
                     label="背景图片">
          <a-image width="200"
                   height="200"
                   fit="cover"
                   :src="formItem.image" />
        </a-form-item>
        <a-form-item field="name"
                     label="原视频">
          <div class="flex fd_c">
            <video class="mb20"
                   v-if="formItem.url"
                   width="100%"
                   controls
                   :src="formItem.url"></video>
            <div class="mt20">
              <!-- <a download :href="formItem.url">下载原视频</a> -->
              <a-button @click="download(formItem.url)"
                        type="primary">下载原视频</a-button>
            </div>
          </div>
        </a-form-item>
        <a-form-item field="name"
                     label="提交时间">
          <a-input readonly
                   v-model="formItem.submit_time" />
        </a-form-item>
        <a-form-item field="name"
                     label="回传视频">
          <div class="flex fd_c">
            <video class="mb20"
                   v-if="formItem.clip_url"
                   width="100%"
                   controls
                   :src="formItem.clip_url"></video>
            <div class="mt20">
              <a-button @click="download(formItem.clip_url)"
                        type="primary">下载回传视频</a-button>
            </div>
          </div>
        </a-form-item>
        <a-form-item field="name"
                     label="回传时间">
          <a-input readonly
                   v-model="formItem.clip_time" />
        </a-form-item>
        <a-form-item field="name"
                     label="状态">
          <a-tag v-if="formItem.status==0"
                 bordered
                 color="blue">待提交剪辑</a-tag>
          <a-tag v-if="formItem.status==1"
                 bordered
                 color="orange">待上传</a-tag>
          <a-tag v-if="formItem.status==2"
                 bordered
                 color="green">已完成</a-tag>
        </a-form-item>
      </a-form>
    </a-modal>

    <a-modal title="查看资源"
             width="800px"
             :ok-loading="formLoading2"
             :on-before-ok="formSubmit2"
             v-model:visible="formVisible2">
      <a-form ref="formRef2"
              :model="formData2">
        <a-form-item field="name"
                     label="回传视频">
          <div class="flex fd_c">
            <video class="mb20"
                   v-if="formData2.clip_url"
                   width="100%"
                   controls
                   :src="formData2.clip_url"></video>
            <div>
              <uploadFile @change="changeFile"
                          :accepts="['video/mp4']"></uploadFile>
            </div>
          </div>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<style scoped>
.w100 {
  width: 100%;
}

.flex {
  display: flex;
}

.fd_c {
  flex-direction: column;
}

.mt20 {
  margin-top: 20px;
}

video {
  width: 200px;
  height: 200px;
}
</style>
